import { View, Text, TextInput, Button, Image, StyleSheet, Dimensions } from 'react-native';
import { Link, useRouter } from "expo-router";
import React, { useEffect, useState } from 'react';
import { Input } from '@rneui/themed';
import { FaAngleLeft } from 'react-icons/fa';
import axios from 'axios';

// 获取屏幕宽度和高度
const { width, height } = Dimensions.get('window');

export default function index() {
  // 账号
  let [user, setUser] = React.useState('');
  let [show, setShow] = React.useState(false)
  let [show2, setShow2] = React.useState(false)
  // 验证码
  let login = async () => {
    let yzm = localStorage.getItem('yzm')
    console.log(yzm);
    if (user !== yzm) {
      setShow(true)
    } else {
      nav.push('/(tabs)')
    }

  };
  let send = async () => {
    let { data } = await axios.post('http://localhost:3000/show', { 'user': user });
    if (data.code == 200) {
      // 验证码
      if (data.yzm) {
        console.log(data.yzm);
        setShow2(true)
      }
    }
  }
  let nav = useRouter();

  // 自适应
  // 用于存储动态变化的屏幕宽度和高度
  let [screenWidth, setScreenWidth] = useState(width);
  let [screenHeight, setScreenHeight] = useState(height);
  // 组件挂载时添加监听器
  useEffect(() => {
    const dimensionChangeHandler = () => {
      const { width, height } = Dimensions.get('window');
      setScreenWidth(width);
      setScreenHeight(height);
    };
    Dimensions.addEventListener('change', dimensionChangeHandler);
    return () => {
      // 组件卸载时移除监听器
      Dimensions.removeEventListener('change', dimensionChangeHandler);
    };
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {/* 左上角返回箭头样式调整为自适应位置，使用相对定位结合margin来微调位置 */}
      <View style={{ marginLeft: (screenWidth * 0.05), marginTop: screenHeight * 0.08, alignItems: 'left', }}>
        <FaAngleLeft size={screenWidth * 0.09} color="black" />
      </View>
      <View style={{ flex: 1, marginTop: screenHeight * 0.05, justifyContent: 'flex-start', alignItems: 'center', padding: screenWidth * 0.05 }}>

        {/* 整体内容区域使用flexbox布局，垂直排列内部元素 */}
        <View style={{ flex: 1, width: '100%', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
          {/* 登录标题样式自适应 */}
          <Text style={{ fontSize: screenWidth * 0.05, marginBottom: screenHeight * 0.02, fontFamily: 'PingFangSC-regular' }}><b>邮箱验证</b></Text>
          {/* 副标题样式自适应 */}
          <Text style={{ fontSize: screenWidth * 0.03, color: 'rgba(109, 114, 128, 1)' }}>我们已经将认证码发送到你的邮件中进行验证。请检查并填写在下面。</Text>
          {/* 邮箱相关区域使用flexbox布局 */}
          <View style={{ width: '100%', marginTop: screenHeight * 0.047 }}>
            {/* 邮箱文本提示样式自适应 */}
            <Text style={{ fontSize: screenWidth * 0.03, color: 'rgba(51,51,51,1)' }}>验证码</Text>
            {/* 输入框样式自适应宽度等 */}
            <Input
              style={{ height: screenHeight * 0.06, backgroundColor: 'rgb(255, 251, 251)', marginVertical: screenHeight * 0.01, borderBottomWidth: 0, }}
              placeholder='   请输入验证码'
              value={user}
              onChangeText={(e) => setUser(e)}
              inputContainerStyle={{ borderBottomWidth: 0 }}
            />
            {show && user.length > 0 ? <Text style={{ fontSize: screenWidth * 0.03, color: 'rgba(239, 68, 68, 1)', marginTop: screenHeight * 0.01 }}>验证码填写错误</Text> : null}
            {show2 ? <Text style={{ fontSize: screenWidth * 0.03, color: 'green', marginTop: screenHeight * 0.01 }}>验证码已成功发送，请去邮箱查看</Text> : null}

            {/* 注册提示文本及链接样式自适应并居中 */}
            <View style={{ marginTop:screenHeight*0.047,alignItems: 'center', }}>
              <Text style={{ fontSize: screenWidth * 0.035 }}>没有收到验证码？
                <Link href="/" style={{ color: 'blue' }}>重新发</Link>
              </Text>
              <Text>
                <Link href="/" style={{ color: 'blue' }}>送</Link>
              </Text>
            </View>
          </View>
          {/* 登录按钮样式自适应，使用flexbox布局 */}
          {user.length! < 6 ? <View style={{
            flex: 1,
            width: '100%',
            marginVertical: screenHeight * 0.003,
            marginTop: screenHeight * 0.07,
          }}>
            <Text
              style={{
                width: '100%',
                height: screenHeight * 0.08,
                lineHeight: screenHeight * 0.06,
                color: "rgba(156,163,175,1)",
                borderRadius: 100,
                textAlign: 'center',
                backgroundColor: 'rgba(210, 213, 218, 1)',
                fontSize: width * 0.05,  // 根据屏幕宽度按比例设置字号，这里示例为屏幕宽度的3.25%，可调整
                paddingVertical: height * 0.008,  // 通过paddingVertical按屏幕高度比例设置上下内边距，模拟按钮高度，示例为屏幕高度的0.8%，可调整
                paddingHorizontal: width * 0.22,  // 通过paddingHorizontal按屏幕宽度比例设置左右内边距，模拟按钮宽度，示例为屏幕宽度的22%，可调整
              }}>确定</Text>
          </View> : <View style={{
            flex: 1,
            width: '100%',
            marginVertical: screenHeight * 0.003,
            marginTop: screenHeight * 0.07,
          }}>
            <Text
              onPress={() => {
                login()
              }}
              style={{
                width: '100%',
                height: screenHeight * 0.08,
                lineHeight: screenHeight * 0.06,
                color: "rgb(255, 255, 255)",
                borderRadius: 100,
                textAlign: 'center',
                backgroundColor: 'rgba(0,0,0,1)',
                fontSize: width * 0.05,  // 根据屏幕宽度按比例设置字号，这里示例为屏幕宽度的3.25%，可调整
                paddingVertical: height * 0.008,  // 通过paddingVertical按屏幕高度比例设置上下内边距，模拟按钮高度，示例为屏幕高度的0.8%，可调整
                paddingHorizontal: width * 0.22,  // 通过paddingHorizontal按屏幕宽度比例设置左右内边距，模拟按钮宽度，示例为屏幕宽度的22%，可调整
              }}>确定</Text>
          </View>}
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({});